<template>
  <v-row justify="center">
    <v-dialog
      v-model="dialog_"
      transition="dialog-bottom-transition"
      max-width="600px"
    >
      <v-card>
        <v-card-title>
          <span class='text-h5'>新建团队</span>
        </v-card-title>
        <v-divider/>
        <v-card-text>
          <v-row>
            <v-col cols='12'>
              <v-text-field
                label='团队名称'
                persistent-hint
                v-model='groupData.name'
              />
            </v-col>
            <v-col cols='12'>
              <v-text-field
                label='团队描述'
                persistent-hint
                v-model='groupData.description'
              />
            </v-col>
          </v-row>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="#21A2BF"
            text
            @click="dialog_ = false"
          >
            返回
          </v-btn>
          <progress-button
            :text="true"
            :loading='loading'
            progressColor="gray darken-1"
            color="#21A2BF"
            @click="createGroup"
            title="创建">
          </progress-button>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>

<script>
  import progressButton from '@/components/common/ProgressButton'
  import groupApi from '@/api/apiPath/groupApi'

  export default {
    name: 'CreateGroupDialog',
    components: {
      progressButton
    },
    props: {
      dialog: {
        types: Boolean,
        default: false
      }
    },
    data() {
      return {
        loading: false,
        imgPath: '',
        groupData: {
          name: '',
          description: ''
        }
      }
    },
    methods: {
      async createGroup() {
        try {
          const result = await groupApi.createGroup(this.groupData)
          this.dialog_ = false
          this.loading = false
          this.$toast.success(result.data)
          this.$emit('on-created')
        } catch (e) {
          this.$toast.error(`创建失败${e}`)
        }
      }
    },
    computed: {
      dialog_: {
        get() {
          return this.dialog;
        },
        set(val) {
          //改变由父组件控制
          this.$emit('on-change-dialog', val);
        }
      }
    }
  }
</script>

<style scoped>

</style>
